﻿@model MusicOnLine.Models.SingerAlbum

@{
    ViewBag.Title = "SingerAlbums";
    int i = 1;
}
<style type="text/css">
    .divCurrent {
       
         float:left; 
         width:100px;
         text-align:center;
         height:25px; 
         line-height:25px;    
        background-color:#669900;     
        color:#fff;
        margin-right:5px;
        border-top-left-radius:3px;
        border-top-right-radius:3px;
    }
    .divBCurrent {        
         float:left; 
         width:100px;
         text-align:center;
         height:25px; 
         line-height:25px;        
        cursor:pointer;
         background-color:#f1f1f1;
          margin-right:5px;
        border-top-left-radius:3px;
        border-top-right-radius:3px;
    }
    .divTab:hover
    {
          background-color:#669900;     
          color:#fff;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {         
        $(".divTab").click(function () {
            $(".divTab").not(this).removeClass("divCurrent").addClass("divBCurrent");
            $(this).removeClass("divBCurrent");
            $(this).addClass("divCurrent");
            $("#" + $(".divTab").not(this).attr("data-contentID")).hide();
            $("#" + $(this).attr("data-contentID")).show();
        });
    })
    function showAlbumList(str) {
        window.location = str;
    }
  </script>
<div>
    <div>
        <div style="width:120px; border-radius:5px; line-height:120px;  overflow:hidden; text-align:center;">
            <img style="max-height:122px; max-width:122px; vertical-align:middle;" src="@Url.Content("~/SingerImg/"+Model.Singer.ImgUrl)" />
        </div>
    </div>
    <div style="height:10px;"></div>
    <div style="border-bottom:solid 1px #669900; height:25px; z-index:999;">
        <div class="divCurrent divTab" data-contentID="divTopSongs">热门歌曲</div>
         <div class="divBCurrent divTab" data-contentID="divAlbums" style="left:100px; border-left:none;" >专辑</div>
    </div>   
</div>
<div id="divTopSongs" style=" font-size: 1em;">
    <div>
            <div class="divellipsis" style=" float:left; width:20px; text-align:center;">No</div>
            <div class="divellipsis" style=" float:left; width:250px; text-align:center; ">曲名</div>
             <div class="divellipsis" style=" float:left; width:100px;  text-align:center;">专辑</div>
             <div class="divellipsis" style=" float:left; width:100px; text-align:center; ">播放次数</div>
    </div>
@foreach (var item in Model.TopSongs)
{    
        <div class="divsongInfo"  style="clear:both;height:18px; line-height:18px; ">
            <div class="divellipsis" style=" float:left; width:20px; text-align:center;">@(i)</div>
            <div class="divellipsis" style=" float:left; width:250px; ">@item.Name</div>
             <div class="divellipsis" style=" float:left; width:100px; ">@item.Album</div>
             <div class="divellipsis" style=" float:left; width:100px; text-align:center; ">@item.PlayedCount</div>
              <div title="收藏" class="divCollect" data-ID="@item.ID"></div>    
             <div title="播放" class="topPlay" data-ID="@item.ID" data-Name="@item.Name" data-artist="@item.Artist" data-Location="@item.Location" data-action="@Url.Action("Play", "AACInfo",null,null)" style="float: left;"  >
            </div>   
            <div title="添加" class="divAddSongs" data-ID="@item.ID" data-Name="@item.Name" data-artist="@item.Artist" data-Location="@item.Location" data-action="@Url.Action("Play", "AACInfo",null,null)"></div>                   
                        
        </div>      
    i++;
}
    </div>
<div style="clear:both;"></div>
<div id="divAlbums" style="display:none; margin-top:10px;">
  @foreach (var item in Model.SingerAlbums)
  { 
         <div style="float: left; width: 150px; height: 165px; margin-left:5px; ">
                <div class="divradiu divAlbumShadow" style="width: 136px; height: 136px; line-height:136px; text-align:center; overflow:hidden;"  >
                    <img alt="@item.AlbumName" src="/AlbumImg/@item.ImgUrl"  
                        style=" max-width:140px; max-height:140px; cursor:pointer; vertical-align:middle;"
                        onclick='showAlbumList("@Url.Action("AlbumSongs", "Home", new { ID = item.ID })");'/>
                </div>
                <div class="divellipsis" style="width:150px; text-align:center; ">@item.AlbumName</div> 
            </div>          
  }
</div>
<div style="clear:both;"></div>
